
<div class="dashboard">
  <!--------------------------new releases--------------------------->
  <div ng-if="vm.newReleases.length && !$root.selectedGenre && vm.isDashType('home') && !vm.isDashSectionHidden('new-releases')">
    <h3>{{'DASHBOARD.NEW_RELEASES' | translate}}</h3>

    <div uis-owl-carousel class="new-releases-slider" >
      <div ng-repeat="newRelease in vm.newReleases" class="new-releases-slide">
        <div ng-if="newRelease.media.poster_path">
          <img class="poster-image" ng-src="https://image.tmdb.org/t/p/w342/{{newRelease.media.poster_path}}" class="pull-left">
        </div>
        <div ng-if="newRelease.media.poster_image_src">
          <img class="poster-image" ng-src="{{newRelease.media.poster_image_src}}" class="pull-left">
        </div>
        <div class="image-background" style="background-image: url('https://image.tmdb.org/t/p/w1280/{{newRelease.media.backdrop_path}}')">

          <div>
            <i ng-class="newRelease.media.inWatchlist ? 'remove-icon ion-android-remove-circle' : 'add-icon ion-android-add-circle'"
               ng-click="vm.handleWatchlistUpdate(newRelease.media.inWatchlist ? 'removed' : 'added', newRelease.media)"></i>
          </div>

          <i class="info-icon ion-ios-information" ng-click="vm.showDetails(newRelease.media)"></i>
          <div class="new-release-footer">
            <a class="play-icon ion-ios-play" ui-sref="player({videoId: newRelease.videoToPlayId})"></a>
            <div class="new-releases-description">
              <h3>
                {{newRelease.media.title || newRelease.media.name}}
                <span ng-if="newRelease.media.release_date">({{newRelease.media.release_date.substring(0,4)}})</span>
              </h3>
              <h4>{{newRelease.description}}</h4>
              <p>{{newRelease.media.overview}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <h2 class="genre-display" ng-if="$root.selectedGenre">{{'DASHBOARD.LOOKING_AT_GENRE' | translate}} <strong ng-bind="$root.selectedGenre.name"></strong></h2>

  <!----------------------------------------------continue watching-------------------------------------------->

  <div ng-if="vm.continueWatching.length && !$root.selectedGenre && vm.isDashType('home') && !vm.isDashSectionHidden('continue-watching')">
    <hr/>

    <h3>{{'DASHBOARD.CONTINUE_WATCHING' | translate}}</h3>

    <div class="media-list media-list-continue-watching">
      <div class="media-list-item media-poster-item" ng-repeat="viewingStatus in vm.continueWatching">
        <div class="media-item" >

          <streama-video-image type="poster" video="viewingStatus.video" size="300"></streama-video-image>

          <div class="play-text">
            <h4>Continue "<span ng-bind="::(viewingStatus.video.title || viewingStatus.video.show.name)"></span>"</h4>
            <button class=" btn btn-secondary btn-xss complete-watching" ng-click="vm.markCompleted(viewingStatus)">
              {{'DASHBOARD.MARK_COMPLETED' | translate}}</button>
            <p ng-show="viewingStatus.video.isEpisode"><span ng-bind="::viewingStatus.video.episodeString"></span></p>
          </div>
          <!--<div>-->
            <!--<i ng-class="viewingStatus.video.inWatchlist ? 'remove-icon ion-android-remove-circle' : 'add-icon ion-android-add-circle'"-->
               <!--ng-click="vm.handleWatchlistUpdate(viewingStatus.video.inWatchlist ? 'removed' : 'added', viewingStatus.video)"></i>-->
          <!--</div>-->

          <i class="info-icon ion-ios-information" ng-click="vm.showDetails(viewingStatus.video)"></i>
          <a class="play-icon ion-ios-play" ui-sref="player({videoId: viewingStatus.video.id})"></a>
        </div>

        <div class="media-progress-wrapper">

          <div class="progress-info" ng-show="viewingStatus.video.isEpisode">
            <span ng-bind="::viewingStatus.video.episodeString"></span> - <span ng-bind="::viewingStatus.video.title"></span>
          </div>
          <div class="progress-info" ng-show="!viewingStatus.video.isEpisode" ng-bind="::viewingStatus.video.title"></div>

          <div class="progress-time">
            <span ng-bind="::(viewingStatus.currentPlayTime | secondsToTimeDisplay)"></span>
            <span class="text-muted">/ <span ng-bind="::(viewingStatus.runtime | secondsToTimeDisplay)"></span></span>
          </div>

          <div class="media-progress" ng-if="viewingStatus.runtime">
            <div class="progress-inner" style="width: {{viewingStatus.currentPlayTime / viewingStatus.runtime * 100}}%;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!----------------------------------------------recommendations-------------------------------------------->

  <div ng-if="vm.recommendations.length && !$root.selectedGenre && vm.isDashType('home') && !vm.isDashSectionHidden('recommends')">
    <hr/>
    <h3>{{'DASHBOARD.RECOMMENDATIONS' | translate}}</h3>

    <div class="media-list media-list-continue-watching">
      <div class="media-list-item media-poster-item" ng-repeat="video in vm.recommendations track by video.id">
        <div class="media-item" >

          <streama-video-image type="poster" video="video"></streama-video-image>

          <div class="play-text">
            <h4 ng-bind="::(video.title || video.show.name)"></h4>
            <p ng-show="video.isEpisode"><span ng-bind="::video.episodeString"></span></p>
          </div>
          <div>
            <i ng-class="video.inWatchlist ? 'remove-icon ion-android-remove-circle' : 'add-icon ion-android-add-circle'"
               ng-click="vm.handleWatchlistUpdate(video.inWatchlist ? 'removed' : 'added', video)"></i>
          </div>

          <i class="info-icon ion-ios-information" ng-click="vm.showDetails(video)"></i>
          <a class="play-icon ion-ios-play" ui-sref="player({videoId: video.id})"></a>
        </div>
      </div>
    </div>

  </div>

  <!----------------------------------------------watchlist-------------------------------------------->
  <div ng-if="vm.isDashType('home') && vm.watchlistEntry.list.length && !vm.isDashSectionHidden('watchlist')">
    <hr/>
    <h3>{{'DASHBOARD.WATCHLIST' | translate}}</h3>

    <div class="row dash-filter">
      <div class="col-md-3">
        {{'DASHBOARD.SORT' | translate}}
        <video-sort-order-dropdown ng-model="vm.watchlistEntry.sorter" ng-model-options="{getterSetter: true}" dropdown-type="'watchlist'"></video-sort-order-dropdown>
      </div>
    </div>
    <br>

    <div class="media-list">
      <div class="media-list-item media-poster-item" ng-repeat="watchlistEntry in vm.watchlistEntry.list track by watchlistEntry.id">
        <div class="media-item" ng-if="watchlistEntry.tvShow">

          <streama-video-image type="poster" size="300" video="watchlistEntry.tvShow"></streama-video-image>

          <div class="play-text">
            <h4 ng-bind="::watchlistEntry.tvShow.name"></h4>
          </div>
          <i class="remove-icon ion-android-remove-circle" ng-click="vm.removeFromWatchlist(watchlistEntry.tvShow)"></i>
          <div>
            <i ng-class="'remove-icon ion-android-remove-circle'"
               ng-click="vm.handleWatchlistUpdate('removed', watchlistEntry.tvShow)"></i>
          </div>

          <i class="info-icon ion-ios-information" ng-click="vm.showDetails(watchlistEntry.tvShow)"></i>
          <a class="play-icon ion-ios-play" ng-click="vm.fetchFirstEpisodeAndPlay(watchlistEntry.tvShow)"></a>
        </div>
        <div class="media-item" ng-if="watchlistEntry.video">

          <streama-video-image type="poster" size="300" video="watchlistEntry.video"></streama-video-image>

          <div class="play-text">
            <h4 ng-bind="::watchlistEntry.video.title"></h4>
            <p ng-bind="::watchlistEntry.video.release_date.substring(0,4)"></p>
          </div>
          <div>
            <i ng-class="'remove-icon ion-android-remove-circle'"
               ng-click="vm.handleWatchlistUpdate('removed', watchlistEntry.video)"></i>
          </div>

          <i class="info-icon ion-ios-information" ng-click="vm.showDetails(watchlistEntry.video)"></i>
          <a class="play-icon ion-ios-play" ui-sref="player({videoId: watchlistEntry.video.id})"></a>
        </div>
      </div>
    </div>
  </div>
  <div ng-if="vm.isDashType('watchlist') && !vm.watchlistEntry.list.length">
    <p class="no-episodes-yet" >
      {{'DASHBOARD.NO_WATCHLIST_FOUND' | translate}}
    </p>
  </div>

  <!--   --------------- TV SHOWS ---------------------  -->

  <div ng-if="(vm.isDashType('home') || vm.isDashType('discover-shows')) && (!$root.currentProfile.isChild || vm.tvShow.list.length) && !vm.isDashSectionHidden('discover-shows')">
    <hr/>
    <h3>
      <span ng-show="!$root.selectedGenre">{{'DASHBOARD.DISCOVER_SHOWS' | translate}}</span>
      <span ng-show="$root.selectedGenre">{{::$root.selectedGenre.name}} TV Shows</span>
    </h3>

    <div class="row dash-filter">
      <div class="col-sm-3">
        {{'DASHBOARD.SORT' | translate}}
        <video-sort-order-dropdown ng-model="vm.tvShow.sorter" ng-model-options="{getterSetter:true}" dropdown-type="'tvShow'"></video-sort-order-dropdown>
      </div>

      <div class="col-sm-4">
        <ui-select class="tag-select" multiple ng-model="vm.tvShow.filter.genre" ng-change="vm.tvShow.setFilter()" theme="bootstrap" title="Filter by Genre">
          <ui-select-match placeholder="{{'DASHBOARD.FILTER_BY_GENRE' | translate}}">{{$item.name}}</ui-select-match>
          <ui-select-choices repeat="genre.id as genre in genres | propsFilter: {name: $select.search}">
            <div class="tag-wrapper">
              <div class="tag-name" ng-bind-html="genre.name | highlight: $select.search"></div>
            </div>
          </ui-select-choices>
        </ui-select>
      </div>

      <div class="col-sm-4">
        <input class="form-control input-sm" type="text" ng-model="vm.tvShow.filter.name" ng-model-options="{debounce: 400}"
               placeholder="{{'DASHBOARD.SEARCH_BY_NAME' | translate}}" ng-change="vm.tvShow.setFilter()" />
      </div>
    </div>
    <br>

    <div class="spinner" ng-show="vm.tvShow.isLoading">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>

    <p class="no-episodes-yet" ng-show="!vm.tvShow.list.length">
      {{'DASHBOARD.NO_TVSHOWS_FOUND' | translate}}
    </p>

    <div class="media-list">
      <div class="media-list-item media-poster-item" ng-repeat="tvShow in vm.tvShow.list | filter: vm.tvShow.filter.execute">
        <div class="media-item" >
          <streama-video-image type="poster" size="300" video="tvShow"></streama-video-image>

          <div class="play-text">
            <h4 ng-bind="::tvShow.name"></h4>
          </div>

          <div>
            <i ng-class="tvShow.inWatchlist ? 'remove-icon ion-android-remove-circle' : 'add-icon ion-android-add-circle'"
               ng-click="vm.handleWatchlistUpdate(tvShow.inWatchlist ? 'removed' : 'added', tvShow)"></i>
          </div>

          <i class="info-icon ion-ios-information" ng-click="vm.showDetails(tvShow)"></i>
          <a class="play-icon ion-ios-play" ng-click="vm.fetchFirstEpisodeAndPlay(tvShow)"></a>
        </div>
      </div>
    </div>


    <div class="text-center" ng-if="vm.tvShow.total > vm.tvShow.list.length">
      <button class="btn btn-primary btn-outline" ng-click="vm.tvShow.loadMore()">Load more ...</button>
    </div>
  </div>

  <!--   --------------- MOVIES ---------------------  -->

  <div ng-if="(vm.isDashType('home') || vm.isDashType('discover-movies')) && (!$root.currentProfile.isChild || vm.movie.list.length) && !vm.isDashSectionHidden('discover-movies')">
    <hr/>
    <h3>
      <span ng-show="!selectedGenre">{{'DASHBOARD.DISCOVER_MOVIES' | translate}}</span>
      <span ng-show="selectedGenre">{{::selectedGenre.name}} Movies</span>
     </h3>

    <div class="row dash-filter" ng-hide="!vm.movie.filter && !vm.movie.list.length">
      <div class="col-sm-3">
        {{'DASHBOARD.SORT' | translate}}
        <video-sort-order-dropdown ng-model="vm.movie.sorter" ng-model-options="{getterSetter:true}" dropdown-type="'movie'"></video-sort-order-dropdown>
      </div>

      <div class="col-sm-4">
        <ui-select class="tag-select" multiple ng-model="vm.movie.filter.genre" ng-change="vm.movie.setFilter()" theme="bootstrap" title="Filter by Genre">
          <ui-select-match placeholder="{{'DASHBOARD.FILTER_BY_GENRE' | translate}}">{{$item.name}}</ui-select-match>
          <ui-select-choices repeat="genre.id as genre in genres | propsFilter: {name: $select.search}">
            <div class="tag-wrapper">
              <div class="tag-name" ng-bind-html="genre.name | highlight: $select.search"></div>
            </div>
          </ui-select-choices>
        </ui-select>
      </div>

      <div class="col-sm-4">
        <input class="form-control input-sm" type="text" ng-model="vm.movie.filter.title" ng-model-options="{debounce: 400}"
               placeholder="{{'DASHBOARD.SEARCH_BY_NAME' | translate}}" ng-change="vm.movie.setFilter()" />
      </div>
    </div>
    <br>

    <div class="spinner" ng-show="vm.movie.isLoading">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>

    <p class="no-episodes-yet" ng-show="!vm.movie.list.length">

      {{'DASHBOARD.NO_MOVIES_FOUND' | translate}}
    </p>

    <div class="media-list">
      <div class="media-list-item media-poster-item" ng-repeat="movie in vm.movie.list | orderBy:vm.movie.sorter.sort |filter: vm.movie.filter.execute">
        <div class="media-item" >

          <streama-video-image type="poster" size="300" video="movie"></streama-video-image>

          <div class="play-text">
            <h4 ng-bind="::movie.title"></h4>
            <p ng-bind="::movie.release_date.substring(0,4)"></p>
          </div>
          <div>
            <i ng-class="movie.inWatchlist ? 'remove-icon ion-android-remove-circle' : 'add-icon ion-android-add-circle'"
               ng-click="vm.handleWatchlistUpdate(movie.inWatchlist ? 'removed' : 'added', movie)"></i>
          </div>

          <i class="info-icon ion-ios-information" ng-click="vm.showDetails(movie)"></i>
          <a class="play-icon ion-ios-play" ui-sref="player({videoId: movie.id})"></a>
        </div>
      </div>
    </div>

    <div class="text-center" ng-if="vm.movie.total > vm.movie.list.length">
      <button class="btn btn-primary btn-outline" ng-click="vm.movie.loadMore()">Load more ...</button>
    </div>
  </div>

  <!--   --------------- GENERIC VIDEOS ---------------------  -->

  <div ng-if="vm.genericVideo.list.length && vm.isDashType('home') && !vm.isDashSectionHidden('discover-generic')">
    <hr/>
    <h3>
      <span ng-show="!$root.selectedGenre">{{'DASHBOARD.DISCOVER_OTHER_VIDEOS' | translate}}</span>
      <span ng-show="$root.selectedGenre">{{::$root.selectedGenre.name}} Videos</span>
     </h3>

    <div class="row dash-filter">
      <div class="col-md-3">
        {{'DASHBOARD.SORT' | translate}}
        <video-sort-order-dropdown ng-model="vm.genericVideo.sorter" ng-model-options="{getterSetter: true}" dropdown-type="'movie'"></video-sort-order-dropdown>
      </div>

      <div class="col-sm-4">
        <input class="form-control input-sm" type="text" ng-model="vm.genericVideo.filter.title" placeholder="Search by Title..."
               ng-model-options="{debounce: 400}"  ng-change="vm.genericVideo.setFilter()"/>
      </div>
    </div>
    <br>

    <div class="spinner" ng-show="vm.genericVideo.isLoading">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>



    <div class="media-list">
      <div class="media-list-item media-poster-item" ng-repeat="movie in vm.genericVideo.list  |filter: vm.genericVideo.filter.title">

        <div class="media-item" >


          <streama-video-image type="poster" size="300" video="movie"></streama-video-image>

          <div class="play-text">
            <h4 ng-bind="::movie.title"></h4>
            <p ng-bind="::movie.release_date.substring(0,4)"></p>
          </div>
          <div>
            <i ng-class="movie.inWatchlist ? 'remove-icon ion-android-remove-circle' : 'add-icon ion-android-add-circle'"
               ng-click="vm.handleWatchlistUpdate(movie.inWatchlist ? 'removed' : 'added', movie)"></i>
          </div>

          <i class="info-icon ion-ios-information" ng-click="vm.showDetails(movie)"></i>
          <a class="play-icon ion-ios-play" ui-sref="player({videoId: movie.id})"></a>
        </div>
      </div>
    </div>
  </div>
</div>
